<template>
  <div class="alloc-resource">
    <!-- 这是一组 -->
    <div class="group" v-for="item in 5"> 
      <div class="check-all">
        <!-- 全选 -->
        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">Check
          all</el-checkbox>
      </div>
      <div class="checkbox">
        <!-- 多选框  组 -->
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in cities" :key="city" :label="city">{{
            city
          }}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="btn-box">
      <el-button type="primary" @click="">保存</el-button>
      <el-button @click="">清空</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedCities = ref(['Shanghai', 'Beijing'])
const cities = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']

const handleCheckAllChange = (val: boolean) => {
  checkedCities.value = val ? cities : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}
</script>



<style scoped lang="less">
.alloc-resource {
  padding: 20px;
  box-shadow: 0 2px 12px 1px rgba(0, 0, 0, .1);

  .group {

    .check-all {
      padding: 20px;
      background-color: #f2f6fc;
    }

    .checkbox {
      padding: 20px;
      background-color: #fff;
    }
  }

  .btn-box {
    margin-top: 40px;
    display: flex;
    justify-content: center;
  }
}
</style>